<template>
	<!-- 新增地址 -->
	<view>
		<view class="addAddress-main">
			<!-- 新增收货地址表单 -->
			<view class="addAddress-from">
				<view class="addAddress-from-item">
					<view class="addAddress-from-item-title">收货人</view>

					<view class="addAddress-from-item-value">
						<input type="text" placeholder="请输入收货人" class="inpsty" v-model="addressQuery.name" />
					</view>
				</view>
				<view class="addAddress-from-item">
					<view class="addAddress-from-item-title">联系电话</view>
					<view class="addAddress-from-item-value">
						<input type="tel" placeholder="请输入联系电话" class="inpsty" v-model="addressQuery.phone" />
					</view>
				</view>
				<view class="addAddress-from-item">
					<view class="addAddress-from-item-title">选择地区</view>
					<view class="regionBox" @click="openAddress">
						<text v-if="addressInfo">{{ addressInfo }}</text>
						<text style="color: #777" v-else>请选择所在地</text>
					</view>
				</view>
				<view class="addAddress-from-item">
					<view class="addAddress-from-item-title">地址详情</view>

					<view class="addAddress-from-item-value">
						<input type="text" placeholder="请输入地址详情" class="inpsty" v-model="addressQuery.address" />
						<view class="map" @click="addressShow = true">
							<uni-icons type="location" size="20" color="red" style="margin-bottom: -2px"></uni-icons>
							<text>定位</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 设置默认 -->
			<view class="addAddress-from addAddress-acquiesce">
				<view class="addAddress-from-item" style="height: 90rpx; border-bottom: none">
					<view class="addAddress-from-item-title" style="width: 500rpx">
						<text>设置默认标签</text>
						<view class="tips">提醒:每次下单会默认推荐使用该地址</view>
					</view>

					<view class="addAddress-from-item-value">
						<u-switch activeColor="#f56c6c" v-model="switchDefault" @change="change"></u-switch>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增收货地址提交 -->
		<view class="addAddress-btn" :style="bottomStyle">
			<u-button type="primary" color="#e43927" :text="addressId ? '编辑' : '保存'" shape="circle" @click="gotoAddress"></u-button>
		</view>

		<!-- 地址选择 -->
		<hwxcAddressSelection
			@subAddress="getSubAddress"
			@changeAddress="getChange"
			ref="addressRef"
			:provinceId="addressQuery.province_id"
			:cityId="addressQuery.city_id"
			:areaId="addressQuery.district_id"
			:provinceListData="provinceList"
			:cityListData="cityList"
			:areaListData="areaList"
		/>

		<!-- 地址选择 -->
		<u-popup :show="addressShow" @close="getClose" :closeable="true">
			<hwxcGdMap @closeMap="getClose" @subMap="getsubMap" :cityName="cityNameVal"/>
		</u-popup>
	</view>
</template>

<script>
import { userAddressSave, userAddressDetail, commonArea } from '../../api/home/index.js';
import hwxcGdMap from '../../components/hwxcGdMap/hwxcGdMap.vue';
import { validatePhoneNumber } from '../../utils/tools.js';
import hwxcAddressSelection from '../../components/hwxcAddressSelection/hwxcAddressSelection.vue';
export default {
	data() {
		return {
			// 添加地址
			addressQuery: {
				name: '',
				phone: '',
				// 省ID
				province_id: '',
				// 市ID
				city_id: '',
				// 区县ID
				district_id: '',
				// 详细地址
				address: '',
				default: 0,
				lng: '',
				lat: ''
			},
			// 是否默认
			switchDefault: false,
			// 地址选择状态
			addressShow: false,
			addressId: null,
			addressInfo: null,

			provinceList: [],
			cityList: [],
			areaList: [],
			
			cityNameVal:""
		};
	},

	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},

	components: {
		hwxcGdMap
	},

	async onLoad(option) {
		const { type, id } = option;
		this.addressId = id;
		// 更改导航栏标题
		if (type == 'eidt') {
			uni.setNavigationBarTitle({
				title: '编辑地址'
			});
			this.getUserAddressDetail(id);
		} else {
			uni.setNavigationBarTitle({
				title: '新增地址'
			});
		}
		await this.getcommonArea();
		await this.getAddressInfo();
	},

	methods: {
		// 切换默认
		change() {},

		async getcommonArea() {
			try {
				const provinceData = await commonArea();
				if (provinceData.code == 1) {
					this.provinceList = provinceData.data;
					const cityData = await commonArea({
						pid: this.addressQuery.province_id || this.provinceList[0].id
					});
					if (cityData.code == 1) {
						this.cityList = cityData.data;
						const areaData = await commonArea({
							pid: this.addressQuery.city_id || this.cityList[0].id
						});
						if (areaData.code == 1) {
							this.areaList = areaData.data;
						}
					}
				}
			} catch (e) {
				throw Error(e);
			}
		},

		async getChange(info) {
			if (info.type == 'province') {
				this.addressQuery.province_id = info.id;
				const cityData = await commonArea({
					pid: this.addressQuery.province_id
				});
				this.cityList = cityData.data;
				this.areaList = [];
			} else if (info.type == 'city') {
				this.addressQuery.city_id = info.id;
				const areaData = await commonArea({
					pid: this.addressQuery.city_id
				});
				this.areaList = areaData.data;
			} else if (info.type == 'area') {
				this.addressQuery.district_id = info.id;
			}
		},

		// 详细地址信息
		async getAddressInfo() {
			if (this.addressQuery.district_id) {
				let provinceInfo = this.provinceList.filter((item) => {
					if (item.id == this.addressQuery.province_id) {
						return item;
					}
				});
				let cityInfo = this.cityList.filter((item) => {
					if (item.id == this.addressQuery.city_id) {
						return item;
					}
				});
				let areaInfo = this.areaList.filter((item) => {
					if (item.id == this.addressQuery.district_id) {
						return item;
					}
				});
				this.cityNameVal = cityInfo[0].name;
				this.addressInfo = provinceInfo[0].name + '/' + cityInfo[0].name + '/' + areaInfo[0].name;
			} else {
				this.addressInfo = '';
			}
		},

		// 提交新增
		async gotoAddress() {
			// 校验手机号
			if (!validatePhoneNumber(this.addressQuery.phone)) {
				return uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
			}

			if (this.switchDefault) {
				uni.showModal({
					title: '温馨提示',
					cancelText: '再想想',
					confirmColor: '#bb412e',
					content: '确定使用当前位置为收货地址吗?',
					success: async (res) => {
						if (res.confirm) {
							await this.handleData();
							const resData = await userAddressSave(this.addressQuery);
							uni.showToast({
								title: '新增地址成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack(-1);
							}, 500);
						}
					}
				});
			} else {
				await this.handleData();
				const resData = await userAddressSave(this.addressQuery);
				uni.showToast({
					title: '新增地址成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack(-1);
				}, 500);
			}
		},

		// 获取地址详情
		async getUserAddressDetail(id) {
			try {
				const resData = await userAddressDetail({
					id
				});
				this.addressQuery.name = resData.data.name;
				this.addressQuery.phone = resData.data.phone;
				this.addressQuery.address = resData.data.address;
				this.addressQuery.lng = resData.data.lng;
				this.addressQuery.lat = resData.data.lat;
				this.addressQuery.province_id = resData.data.province.id;
				this.addressQuery.city_id = resData.data.city.id;
				this.addressQuery.district_id = resData.data.district.id;
				this.switchDefault = resData.data.default == '0' ? false : true;
			} catch (e) {
				throw Error(e);
			}
		},

		// 关闭地址选择
		getClose() {
			this.addressShow = false;
		},

		// 确认地址
		getsubMap(val) {
			if (val.location) {
				const location = val.location;
				this.addressQuery.lat = location[0];
				this.addressQuery.lng = location[1];
			} else {
				this.addressQuery.lat = val.latitude;
				this.addressQuery.lng = val.longitude;
			}
			this.addressQuery.address = val.address;
			this.addressShow = false;
		},

		// 数据处理
		handleData() {
			this.addressQuery.default = this.switchDefault ? 1 : 0;
			if (!this.addressQuery.name) {
				return uni.showToast({
					title: '缺少收货人',
					icon: 'error'
				});
			}

			if (!this.addressQuery.phone) {
				return uni.showToast({
					title: '缺少收货号码',
					icon: 'error'
				});
			}

			if (this.addressId) {
				this.addressQuery.id = this.addressId;
			}
		},

		openAddress() {
			this.$refs.addressRef.show = true;
		},

		getSubAddress() {
			this.getAddressInfo();
		}
	}
};
</script>

<style scoped lang="scss">
.addAddress-main {
	box-sizing: border-box;
	padding: 20rpx;

	.addAddress-from {
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 24rpx;
		background-color: #fff;
		font-size: 28rpx;
		padding-top: 16rpx;
		.addAddress-from-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px #f3f3f3 solid;
			padding: 25rpx 0px;

			.addAddress-from-item-title {
				width: 120rpx;
				.tips {
					color: #999;
					padding: 10rpx 0px;
					font-size: 24rpx;
				}
			}

			.regionBox {
				height: 35px;
				line-height: 35px;
				border-radius: 4px;
				padding-left: 10px;
				font-size: 26rpx;
			}

			.addAddress-from-item-value {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 100%;
				.inpsty {
					font-size: 26rpx;
					color: #777;
					text-align: right;
					flex: 1;
					margin-right: 8rpx;
				}

				.map {
					display: flex;
					align-items: center;
					flex-direction: column;
					width: 70rpx;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.addAddress-acquiesce {
		margin-top: 20rpx;
		padding-bottom: 16rpx;
	}
}

.addAddress-btn {
	position: fixed;
	bottom: 0rpx;
	left: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 20rpx;
	padding-top: 20rpx;
	background-color: #fff;
}
</style>
